<script setup lang="ts">
import {ref} from "vue";

const drawerShow = ref(true)
const close = () => {
  drawerShow.value = false
}
</script>

<template>
  <div class="drawer">
    <!--遮罩层      -->
    <div class="mask-show" v-if="drawerShow" @click="close()"></div>
    <!--抽屉    -->
    <div class="setbox" :class="{show: drawerShow}">
      <slot></slot>
    </div>
  </div>
</template>

<style scoped lang="scss">
.drawer {
  // height: 500px;
  width: 100%;
  display: flex;
  display: -webkit-flex;
  flex-direction: column;
  /* 遮罩 */
  .mask-show {
    position: absolute;
    z-index: 100;
    top: 0px;
    left: 0px;
    width: 100%;
    height: 100%;
    background-color: rgba(0, 0, 0, 0.5);
  }
  .setbox {
    position: fixed;
    z-index: 1100;
    top: 0px;
    bottom: 0px;
    width: 30%;
    height: 100%;
    background: #FFFFFF;
    border-left: 1px solid #CFD8DC !important;
    box-shadow: 0px 3px 12px rgba(0, 0, 0, 0.12);
    -webkit-transition: all 1s ease;
    transition: all 1s ease;
    // 动画（定位从 -32% 变成 0）
    right: -32%;
    padding: 0px 0px 0px 20px;
  }
  // 动画
  .show {
    right: 0;
  }
}
</style>
